18. Positioning Boxes

INSTRUCTOR NOTE:

The mockup Jessica references can be found here: mock1-fav-app.pdf

A great guide to flexbox can be found here!

At 01:02 in the video, Jessica uses Dev Tools to add the CSS rule display: flex to element.style, which applies the CSS to the selected div element temporarily.

Students following along with the videos should create an .app class in their style.css as follows:

.app {
    display: flex;
}

This rule as-is works with Chrome 29+, IE 11+, and Mozilla 28+. In order to support Safari, the -webkit- prefix must be added:

.app {
    display: -webkit-flex;
    display: flex;
}